import React from 'react';

import { ReactComponent as Chevron } from '@/assets/images/shared/icon-chevron.svg';
import ccs from '@/pagesComponents/BoughtCourse/ui/Tabs/Info/Info.module.scss';
import { innerUrls } from '@/shared/constants';
import { AttachmentDto } from '@/shared/interfaces/generated';
import { declension, getImageUrl } from '@/shared/lib';
import { useMetaTag } from '@/shared/lib/hooks';
import { useAppDispatch } from '@/shared/store';
import { Button, Modal } from '@/shared/ui';
import dayjs from 'dayjs';
import Image from 'next/image';
import { useRouter } from 'next/router';

import cs from './OrderCard.module.scss';

type Props = {
  src: string;
  title: string;
  id: number;
  createdAt: string;
  attachments: AttachmentDto[];
};

export const OrderCard = ({ src, title, id, createdAt, attachments }: Props) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const router = useRouter();
  const onClose = () => {
    setIsOpen(false);
  };

  const handleClick = (item: AttachmentDto) => {
    // dispatch(
    //   setCurrentPDF({
    //     file: item.file || '',
    //     name: item.name || '',
    //   }),
    // );
    router.push(innerUrls.boughtCourse('info', id));
    setIsOpen(false);
  };
  useMetaTag(isOpen, '#999999');
  return (
    <>
      <Button className={cs.card} href={innerUrls.boughtCourse('info', id)} link>
        <div className={cs.image}>
          <Image
            alt={title}
            fill
            sizes="100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, (max-width: 1366px) 25vw, 20vw"
            src={getImageUrl(src)}
          />
        </div>
        <p className={cs.title}>
          {title} <br></br>
          <span className={cs.date}>{dayjs(createdAt).format('DD.MM.YY')}</span>
        </p>
      </Button>
      <Modal className={cs.modal} isMobile isOpen={isOpen} onCloseClick={onClose}>
        <span className={ccs.title}>
          {attachments.length} {declension(attachments.length as number, ['гайд', 'гайда', 'гайдов'])} от companyName
        </span>
        <div className={ccs.pdfs}>
          {attachments.map((item) => (
            <div className={ccs.desc} key={item.id} onClick={() => handleClick(item)}>
              {item.name}
              <Chevron />
            </div>
          ))}
        </div>
      </Modal>
    </>
  );
};
